import { Component, OnInit, Input, Output, EventEmitter, Renderer2, OnDestroy } from '@angular/core';
import { DateFormatService } from './utils/format.service';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';


@Component({
  selector: 'el-date-picker',
  templateUrl: './date-picker.component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: DatePickerComponent,
    multi: true
  }, DateFormatService],
})
export class DatePickerComponent implements OnInit, OnDestroy, ControlValueAccessor {
  @Input() readonly: boolean = false;
  @Input() editable: boolean = true;
  @Input() clearable: boolean = true;
  @Input('change-on-blur') changeOnBlur: boolean = false;
  @Input() size: string = '';
  @Input() align: string = 'left';
  @Input() type: string = 'date';
  @Input() placeholder: string = '选择日期';
  @Input() format: string = 'yyyy-MM-dd';
  @Input('hidden-day') hiddenDay: boolean = false;
  @Input('panel-absolute') panelAbsolute: boolean = true;
  @Input('panel-index') panelIndex: number = 200;
  @Input('panel-width') panelWidth: number = 0;
  @Input() model: any = '';
  @Output() modelChange: EventEmitter<any> = new EventEmitter();
  @Output('clear-click') clearClick: EventEmitter<Event> = new EventEmitter();
  @Output('icon-click') iconClick: EventEmitter<Event> = new EventEmitter();
  @Output() disabled: boolean = false;
  private dateFormat: any;
  private renderer: any;
  showPanelPicker: boolean = false;
  value: number = 0;
  globalClickListener!: Function;
  globalKeydownListener!: Function;
  iconShowClose: any = false;
  private controlChange: any = function () { };
  private controlTouch: any = function () { };

  constructor(dateFormat: DateFormatService, renderer: Renderer2) {
    this.dateFormat = dateFormat;
    this.renderer = renderer;
  }

  iconMouseActionHandle(t: boolean): void {
    if (!this.clearable)
      return;
    this.iconShowClose = this.model && t;
  };


  iconClickHandle(e: Event): void {
    this.iconClick.emit(e);
    if (this.disabled)
      return;
    // use close action
    if (this.iconShowClose) {
      this.clearClick.emit(e);
      this.model = '';
      this.value = Date.now();
      this.showPanelPicker = false;
      this.iconShowClose = false;
      return;
    }
    // toggle action
    this.showPanelPicker = !this.showPanelPicker;
  };


  propagationHandle(event: Event): void {
    event.stopPropagation();
  };

  changeHandle(input: Event): void {
    var /** @type {?} */ time = this.dateFormat.getTime(input);
    // if (!time) return
    this.value = time;
  };


  tryUpdateText(): void {
    if (!this.value) {
      this.model = '';
      this.modelChange.emit(this.model);
      this.controlChange(null);
      this.showPanelPicker = false;
      return;
    }
    var /** @type {?} */ modelTime = new Date(this.model).getTime();
    var /** @type {?} */ time = this.dateFormat.getTime(this.value);
    this.dateChangeHandle(time ? this.value : modelTime);
  };


  dateChangeHandle(time: any): void {
    this.model = DateFormatService.moment(time, this.format);
    this.value = new Date(this.model).getTime();
    this.modelChange.emit(this.model);
    this.controlChange(this.model);
    this.showPanelPicker = false;
  };


  focusHandle(): void {
    var _this = this;
    this.showPanelPicker = true;
    this.globalKeydownListener && this.globalKeydownListener();
    this.globalKeydownListener = this.renderer.listen('document', 'keydown', function (event: any) {
      if (event.keyCode === 9 || event.keyCode === 27) {
        _this.showPanelPicker = false;
        _this.globalKeydownListener && _this.globalKeydownListener();
      }
      if (event.keyCode === 13) {
        _this.tryUpdateText();
      }
    });
  };


  ngOnInit(): void {
    var _this = this;
    this.globalClickListener = this.renderer.listen('document', 'click', function () {
      if (!_this.showPanelPicker)
        return;
      _this.showPanelPicker = false;
      _this.changeOnBlur && _this.tryUpdateText();
    });
    // init value
    var /** @type {?} */ time = this.dateFormat.getTime(this.model);
    if (!time)
      return;
    this.model = DateFormatService.moment(time, this.format);
    this.value = time;
  };


  ngOnDestroy(): void {
    this.globalClickListener && this.globalClickListener();
    this.globalKeydownListener && this.globalKeydownListener();
  };


  writeValue(value: any): void {
    this.model = value;
  };


  registerOnChange(fn: Function): void {
    this.controlChange = fn;
  };


  registerOnTouched(fn: Function): void {
    this.controlTouch = fn;
  };
}
